<template>
	<div class="wrapper">
		<TTreeMenu>
			<template v-for="item in data">
				<TMenuItem :key="item.id" v-if="!item.children">{{ item.title }}</TMenuItem>
				<t-re-sub-menu v-else :key="item.id" :data="item"></t-re-sub-menu>
			</template>
		</TTreeMenu>
	</div>
</template>

<script>
	export default{
		name: 'TreeMenu',
		setup() {
			const data = [
				{
					id: 1,
					title: '选项1'
				},
				{
					id: 2,
					title: '选项2',
					children: [
						{
							id: 21,
							title: '选项21',
							children: [
								{
									id: 211,
									title: '选项211',
									children: [
										{
											id: 2111,
											title: '选项2111'
										}
									]
								}
							]
						},
						{
							id: 22,
							title: '选项22'
						},
					]
				},
				{
					id: 3,
					title: '选项3'
				},
				{
					id: 4,
					title: '选项4'
				},
				{
					id: 5,
					title: '选项5'
				},
			]
			
			return {
				data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper{
		width: 200px;
	}
</style>
